<template>
  <div>
    <div class="but">
      <el-button @click="dialog = true" type="primary">添加管理员</el-button>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          label="地址"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.saddress }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="姓名"
          width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.sname }}</p>
            <p>住址: {{ scope.row.saddress }}</p>
            <p>性别: {{ scope.row.sgender == "1" ? "男":"女" }}</p>
            <p>身份证号: {{ scope.row.sidCard}}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.sname }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          label="电话号码"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.sphone }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="身份证号码"
          width="360">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.sidCard }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
        title="添加管理员界面"
        :before-close="handleClose"
        :visible.sync="dialog"
        direction="ltr"
        custom-class="demo-drawer"
        ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-radio v-model="form.gender" label="1">男</el-radio>
            <el-radio v-model="form.gender" label="2">女</el-radio>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="住址" :label-width="formLabelWidth">
            <el-input v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" :label-width="formLabelWidth">
            <el-input v-model="form.idCard" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="账号" :label-width="formLabelWidth">
            <el-input v-model="form.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="button" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>
    <el-pagination
        style="margin-top: 20px"
        :page-size="pageSize"
        :pager-count="11"
        layout="prev, pager, next"
        :current-page.sync="currentPage"
        @current-change="page"
        :total="parseInt(total)">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "AccountManage",
  data() {
    return {
      pageSize: 6,
      currentPage: 1,
      total: "",
      tableData: null,
      table: false,
      dialog: false,
      loading: false,
      formLabelWidth: '80px',
      timer: null,
      form: {
        name: '',
        address: '',
        phone: '',
        gender: '',
        idCard: '',
        account: '',
        password: ''
      }
    }
  },
  methods: {
    page(currentPage){
      axios({
        url: `http://localhost:88/api/admin/sAdmin/getAdminList/${currentPage}/${this.pageSize}`,
        method: 'get'
      }).then((res) => {
        if (res.data.code === 0) {
          this.tableData = res.data.data.data
          this.total = res.data.data.total
        }
      })
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm(`确定要删除${row.sname}吗(温馨提示，刷新页面后会看到效果)？`)
          .then(_ => {
            this.loading = true;
            console.log(this.form)
            axios({
              url:'http://localhost:88/api/admin/sAdmin/deleteNewAdmin',
              method:'post',
              data:{
                sid: row.sid,
                sname: row.sname,
                saddress: row.saddress,
                sphone: row.sphone,
                sgender: row.sgender,
                sidCard: row.sidCard,
                saccount: row.saccount,
                spassword: row.spassword
              }
            }).then(res => {
              console.log(res)
              const h = this.$createElement;

              this.$notify({
                title: '结果',
                message: h('i', { style: 'color: teal'}, '删除成功!')
              })
            })
          }).catch(_ => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要提交表单吗(温馨提示，刷新页面后会看到效果)？')
          .then(_ => {
            this.loading = true;
            console.log(this.form)
            axios({
              url:'http://localhost:88/api/admin/sAdmin/insertAdmin',
              method:'post',
              data:{
                sname: this.form.name,
                saddress: this.form.address,
                sphone: this.form.phone,
                sgender: this.form.gender,
                sidCard: this.form.idCard,
                saccount: this.form.account,
                spassword: this.form.password
              }
            }).then(res => {
              console.log(res)
            })
            this.timer = setTimeout(() => {
              done();
              // 动画关闭需要一定的时间
              setTimeout(() => {
                this.loading = false;
              }, 400);
            }, 2000);
          }).catch(_ => {});

    }
  },
  mounted() {
    axios({
      url:`http://localhost:88/api/admin/sAdmin/getAdminList/1/${this.pageSize}`,
      method:'get',
    }).then(res => {
      console.log(res)
      this.tableData = res.data.data.data
      this.total = res.data.data.total
    })
  }
}
</script>

<style scoped>
.but{
  float: right;
}
</style>
